<template>
  <div class="main">
    <el-row style="margin-bottom: 3rem">
      <el-col :span="8" :offset="3">
        <el-alert
          title="注意: 分类缩略图必须是200x200的大小,且不能超过500kb,且只能是jpg格式,否则会上传失败!"
          type="info"
          show-icon></el-alert>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form :model="form" label-width="100px">
          <el-form-item label="俱乐部Logo">
            <div class="thumb" @click="showUpload = true">
              <img :src="img">
            </div>
          </el-form-item>
          <el-form-item label="俱乐部名称">
            <el-input v-model.trim="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model.trim="form.mobile" placeholder="可用作登录使用"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model.trim="form.email" placeholder="可用作登录使用"></el-input>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model.trim="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">确认创建</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <ui-upload
      :limit-width="500"
      :limit-height="500"
      :limit-size="500"
      api="/api/upload.image.club.logo"
      @image="image => {form.logo = image; img = imageUrl + form.logo}"
      :show.sync="showUpload"></ui-upload>
  </div>
</template>
<script>
import uiUpload from '@components/upload'
import config from '@config'
export default {
  components: {
    uiUpload
  },
  data () {
    return {
      showUpload: false,
      imageUrl: config.imageUrl,
      img: require('@assets/upload.png'),
      form: {
        name: '',
        mobile: '',
        password: '',
        logo: ''
      }
    }
  },
  methods: {
    submit () {
      if (!this.form.name) {
        this.toast('请输入俱乐部名字...!', 'warning')
        return false
      }
      if (!this.form.mobile) {
        this.toast('请输入手机号码...!', 'warning')
        return false
      }
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/).test(this.form.mobile)) {
        this.toast('手机号码格式错误!', 'warning')
        return false
      }
      if (!this.form.email) {
        this.toast('请输入邮箱...!', 'warning')
        return false
      }
      /* eslint-disable */
      if (!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,8})+$/).test(this.form.email)) {
      /* eslint-enable */
        this.toast('邮箱格式错误...!', 'warning')
        return false
      }
      if (!this.form.password) {
        this.toast('请输入密码...!', 'warning')
        return false
      }
      if (!(/^[0-9a-zA-Z]{8,}$/).test(this.form.password)) {
        this.toast('密码格式错误，请输入8位以上数字与字母的组合，不区分大小写!', 'warning')
        return false
      }
      if (!this.form.logo) {
        this.toast('请上传logo...!', 'warning')
        return false
      }
      this.showLoading()
      this
        .$api
        .club
        .add(this.form)
        .then(r => {
          this.toast('创建成功...！', 'success', () => {
            this.jump(-1)
          })
        })
    }
  }
}
</script>
<style scoped lang="sass">
  .thumb
    width: 100px
    height: 100px
    background-color: #ebebeb
    cursor: pointer
    border-radius: 5px
    &:hover
      background-color: #f4f4f4
    > img
      width: 100%
      height: 100%
      border-radius: 5px
</style>
